<template>
  <div>
    <el-card class="box-card" style="width:60%;margin: auto;">
      <el-form ref="form" :model="ClientGoodInfo" label-width="80px">
        <el-form-item label="物品名称">
          <el-input v-model="ClientGoodInfo.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="ClientGoodInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="ClientGoodInfo.contactName"></el-input>
        </el-form-item >
        <el-form-item label="商品配图">
          <el-upload
            :file-list="fileList1"
            list-type="picture-card"
            :auto-upload="false"
            action="#"
            :on-change="afterRead"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="介绍配图">
          <el-upload
            :file-list="jsfileList1"
            list-type="picture-card"
            :auto-upload="false"
            action="#"
            :on-change="jsafterRead"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="属性">
          <el-button  @click="guigelist.push({specs:'',specsValue:''})">添加属性</el-button>
          <span style="color: #C0C4CC" v-if="guigelist.length == 0">
              请添加属性
          </span>
          <div v-for="(item,index) in guigelist" :key ="index">
            属性 {{index+1}}
            <el-form-item label="属性名称">
              <el-input v-model="item.specs"></el-input>
            </el-form-item>
            <el-form-item label="属性值">
              <el-input v-model="item.specsValue"></el-input>
            </el-form-item>
            <el-button @click="delguigelist(index)"  :plain="true">删除属性</el-button>
          </div>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit()">发布商品</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AuctionPcReleaseGoodsView',

  data () {
    return {
      token: window.sessionStorage.getItem('token'), // 取token
      guigelist: [],
      title: 'Hello',
      fileList1: [],
      jsfileList1: [],
      ClientGoodInfo: {
        goodsName: '',
        phone: '',
        contactName: ''
      },
      dialogImageUrl: '',
      dialogVisible: false,
      goodsId: this.$route.query.goodsId // 当前竞拍商品id
    }
  },

  async mounted () {
    this.getLoginUser()
    this.getGoodsById()
  },

  methods: {
    // 查询当前商品id
    async getGoodsById () {
      await this.$axios.get('/client/auction/getGoodsById', {
        params: {
          goodsId: this.goodsId
        }
      }).then(res => {
        if (res.data.flag) {
          this.ClientGoodInfo = res.data.obj
          this.getImageById()
          this.getLoginUser()
        } else {
          console.log('商品加载失败')
        }
      })
    },

    getImageById () {
      if (this.ClientGoodInfo.imgId !== null) {
        for (let i = 0; i < this.ClientGoodInfo.imgId.split(',').length; i++) {
          this.fileList1.push({ name: 'aaa', url: 'http://101.43.223.224:8765/image/getImageById?id=' + this.ClientGoodInfo.imgId.split(',')[i] })
        }
        console.log(this.fileList1)
      }
      if (this.ClientGoodInfo.imgViewId !== null) {
        for (let i = 0; i < this.ClientGoodInfo.imgViewId.split(',').length; i++) {
          this.jsfileList1.push({ name: 'aaa', url: 'http://101.43.223.224:8765/image/getImageById?id=' + this.ClientGoodInfo.imgViewId.split(',')[i] })
        }
        console.log(this.fileList1)
      }
    },
    async getLoginUser () {
      this.$axios.post('/clientuser/getLoginUser', this.token).then(res => {
        if (res.data.flag) {
          this.loginUser = res.data.obj
          console.log(this.loginUser)
        } else {
          this.myMessage('当前用户暂未参与交易', 'error')
        }
      })
      console.log('已获取登录用户信息')
    },
    delguigelist (index) {
      this.guigelist.splice(index, 1)
    },
    deletePic (a) {
      this.fileList1.splice(a.index, 1)
    },
    afterRead (event) {
      this.fileList1.push(event)
      console.log(this.fileList1)
    },
    jsdeletePic (a) {
      this.jsfileList1.splice(a.index, 1)
    },
    jsafterRead (event) {
      console.log(event)
      this.jsfileList1.push(event)
    },
    // 图片上传的一些方法1
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 图片上传的一些方法1
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 提交
    async submit () {
      debugger
      this.ClientGoodInfo.sellerId = this.loginUser.id
      if (this.ClientGoodInfo.goodsName && this.ClientGoodInfo.phone && this.ClientGoodInfo.contactName) {
        const formdata = new FormData()
        for (const a in this.ClientGoodInfo) {
          if (this.ClientGoodInfo[a]) {
            formdata.set(a, this.ClientGoodInfo[a])
          }
        }
        if (this.fileList1.length > 0) {
          for (const a in this.fileList1) {
            const blod = await new Promise((resolve, reject) => {
              fetch(this.fileList1[a].url).then((response) => response.blob()).then((res) => {
                const blod = new Blob([res])
                resolve(blod)
              })
            })
            console.log(blod)
            formdata.append('goodsImg', blod, this.fileList1[a].name)
          }
        }
        if (this.jsfileList1.length > 0) {
          for (const a in this.jsfileList1) {
            const blod = await new Promise((resolve, reject) => {
              fetch(this.jsfileList1[a].url).then((response) => response.blob()).then((res) => {
                const blod = new Blob([res])
                resolve(blod)
              })
            })
            formdata.append('viewImg', blod, this.jsfileList1[a].name)
          }
        }
        if (this.guigelist.length > 0) {
          formdata.append('JSONspecs', JSON.stringify(this.guigelist))
        }
        if (this.ClientGoodInfo.id === undefined || this.ClientGoodInfo.id === 0) {
          this.$axios.post('/publish/publishSaveAdd', formdata).then(res => {
            if (res.data.flag) {
              console.log(res)
              this.myMessage('操作成功，请等待审核', 'success')
              this.$router.push({
                path: '/auctionView'
              })
            } else {
              this.myMessage('操作失败', 'error')
            }
          })
        } else {
          this.$axios.post('/publish/updatePublish', formdata).then(res => {
            if (res.data.flag) {
              console.log(res)
              this.myMessage('操作成功，请等待审核', 'success')
              this.$router.push({
                path: '/auctionView'
              })
            } else {
              this.myMessage('操作失败', 'error')
            }
          })
        }
      }
    },
    // 我的信息
    myMessage (message, type) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
